<!-- subpkg_consult/description/index.vue -->
<script lang="ts" setup>
	import { ref } from 'vue'
	import type { Image } from '@/types/consult.d.ts'
	import { uploadImgApi } from '@/apis/consult'
	import { useConsultStore } from '@/stores/consult'

	// 提交的数据
	const formData = ref({
		illnessDesc: '', // 病情描述
		illnessTime: 1, // 患病时间
		consultFlag: 0, // 是否就诊过
		pictures: [] as Image[],
	})

	// 患病时长
	const timeArr = [
		{ value: 1, text: '一周内' },
		{ value: 2, text: '一月内' },
		{ value: 3, text: '半年内' },
		{ value: 4, text: '半年以上' },
	]
	const consultArr = [
		{ value: 0, text: '未就诊' },
		{ value: 1, text: '就诊过' },
	]

	// 切换选中的患病时间
	const changeIllnessTime = (value: number) => {
		formData.value.illnessTime = value
	}

	const changeConsultFLag = (value: number) => {
		formData.value.consultFlag = value
	}

	// 选择图片
	const selectImg = async (e) => {
		// console.log(e)
		// 图片的临时路径
		const res = await uploadImgApi(e.tempFilePaths[0])
		// console.log(res)
		formData.value.pictures.push(res)
	}

	// 通过 props 获取 url 中的参数
	const props = defineProps<{ type: string; depId: string; illnessType: string }>()
	// 点击下一步
	const store = useConsultStore()
	const nextStep = () => {
		// console.log(formData.value)
		// 保存 疾病信息
		store.illnessInfo = formData.value
		//  保存 url 中的参数
		store.type = props.type
		store.illnessType = props.illnessType
		store.depId = props.depId

		// 跳转患者列表 通过参数 修改页面的显示
		uni.navigateTo({
			url: '/subpkg_archive/list/list?type=consult',
		})
	}

	// 还原数据
	if (store.illnessInfo.illnessDesc !== '') {
		uni.showModal({
			title: '提示',
			content: '是否恢复上一次的信息?',
			showCancel: true,
			success: (e) => {
				if (e.confirm === true) {
					// store 中的数据 设置给当前页面中的数据
					formData.value = store.illnessInfo
				}
			},
		})
	}
</script>

<template>
	<scroll-page>
		<view class="description-page">
			<!-- 在线医生 -->
			<view class="doctor-online">
				<image src="/static/uploads/doctor-avatar-2.png" class="doctor-avatar" />
				<view class="doctor-info">
					<view class="name">在线医生</view>
					<view class="message">
						请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
					</view>
					<view class="tips">
						<text class="iconfont icon-shield"></text>
						内容仅医生可见
					</view>
				</view>
			</view>
			<!-- 患者信息 -->
			<view class="patient-info">
				<view class="description">
					<uni-easyinput
						type="textarea"
						:input-border="false"
						placeholder-style="font-size: 30rpx; color: #979797"
						placeholder="请详细描述您的病情,病情描述不能为空"
						v-model="formData.illnessDesc"
					/>
				</view>

				<view class="title">本次患病多久了？</view>
				<view class="tags">
					<text
						v-for="(item, index) in timeArr"
						:key="index"
						class="tag"
						:class="{ active: formData.illnessTime === item.value }"
						@tap="changeIllnessTime(item.value)"
						>{{ item.text }}</text
					>
				</view>

				<view class="title">此次病情是否去医院就诊过？</view>
				<view class="tags">
					<text
						v-for="(item, index) in consultArr"
						:key="index"
						class="tag"
						:class="{ active: item.value === formData.consultFlag }"
						@tap="changeConsultFLag(item.value)"
						>{{ item.text }}</text
					>
				</view>
			</view>
			<!-- 上传图片 -->
			<view class="patient-picture">
				<uni-file-picker
					title="上传病情相关图片 (仅医生可见)"
					limit="8"
					:image-styles="{ width: '160rpx', height: '160rpx' }"
					file-extname="png,jpg,gif,webp"
					@select="selectImg"
					v-model="formData.pictures"
				/>
			</view>
		</view>
		<!-- 下一步操作
			如果没有内容直接不显示按钮，简单粗暴
		 -->
		<view v-if="formData.illnessDesc.trim().length > 0" class="next-step">
			<button @tap="nextStep" class="uni-button">下一步</button>
		</view>
	</scroll-page>
</template>

<style lang="scss">
	@import './index.scss';
</style>
